---
title: Button
description: "`Button`は、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。"
storybook: components-button--basic
source: components/button
style: components/button/button.style.ts
---

```tsx preview
<Button>Button</Button>
```

## 使い方

:::code-group

```tsx [package]
import { Button, ButtonGroup } from "@yamada-ui/react"
```

```tsx [alias]
import { Button, ButtonGroup } from "@/components/ui"
```

```tsx [monorepo]
import { Button, ButtonGroup } from "@workspaces/ui"
```

:::

```tsx
<Button />
```

```tsx
<ButtonGroup.Root>
  <ButtonGroup.Item />
</ButtonGroup.Root>
```

### バリアントを変更する

```tsx preview
<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
    {(variant, index) => (
      <Button variant={variant} key={index}>
        {toTitleCase(variant)}
      </Button>
    )}
  </For>
</Wrap>
```

### サイズを変更する

```tsx preview
<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <Button size={size} key={index} minW="24">
        {toTitleCase(size)}
      </Button>
    )}
  </For>
</Wrap>
```

### カラースキームを変更する

```tsx preview
<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Button colorScheme={colorScheme} key={index}>
        {toTitleCase(colorScheme)}
      </Button>
    )}
  </For>
</Wrap>
```

### 形を変える

角丸にする場合は、`fullRounded`を`true`にします。

```tsx preview
<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
    {(variant, index) => (
      <Button variant={variant} key={index} fullRounded>
        Button
      </Button>
    )}
  </For>
</Wrap>
```

### 無効にする

無効にする場合は、`disabled`を`true`にします。

```tsx preview
<Wrap gap="md">
  <For each={["solid", "subtle", "surface", "outline", "ghost"]}>
    {(variant, index) => (
      <Button variant={variant} key={index} disabled>
        Button
      </Button>
    )}
  </For>
</Wrap>
```

### アイコンを追加する

アイコンを追加する場合は、`startIcon`または`endIcon`に`ReactNode`を設定します。

```tsx preview
<Wrap gap="md">
  <Button variant="solid" startIcon={<PlusIcon />}>
    Button
  </Button>

  <Button variant="subtle" endIcon={<ArrowRightIcon />}>
    Button
  </Button>

  <Button variant="surface" startIcon={<MailIcon />}>
    Button
  </Button>

  <Button variant="outline" endIcon={<CheckIcon />}>
    Button
  </Button>

  <Button variant="ghost" startIcon={<XIcon />}>
    Button
  </Button>
</Wrap>
```

### ローディングアニメーションを使う

ローディングアニメーションを使う場合は、`loading`を`true`にします。また、ローディング中にテキストを変更する場合は、`loadingMessage`を使用します。

```tsx preview
<Wrap gap="md">
  <Button loading>Button</Button>

  <Button variant="subtle" loading loadingIcon="dots">
    Button
  </Button>

  <Button variant="surface" loading loadingIcon={<Loading.Puff />}>
    Button
  </Button>

  <Button variant="outline" loading loadingMessage="Loading...">
    Button
  </Button>

  <Button
    variant="ghost"
    loading
    loadingIcon="grid"
    loadingMessage="Loading..."
    loadingPlacement="end"
  >
    Button
  </Button>
</Wrap>
```

:::note
`Button`のローディングは、内部で[Loading](/docs/components/loading)を使用しています。
:::

### グループ化する

```tsx preview
<VStack>
  <ButtonGroup.Root attached variant="outline">
    <ButtonGroup.Item>Button</ButtonGroup.Item>
    <ButtonGroup.IconItem icon={<PlusIcon />} />
  </ButtonGroup.Root>

  <Wrap gap="md">
    <ButtonGroup.Root>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
    </ButtonGroup.Root>

    <ButtonGroup.Root attached disabled variant="outline">
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
    </ButtonGroup.Root>
  </Wrap>

  <Wrap gap="md">
    <ButtonGroup.Root orientation="vertical">
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
    </ButtonGroup.Root>

    <ButtonGroup.Root orientation="vertical" attached variant="outline">
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
      <ButtonGroup.Item>Button</ButtonGroup.Item>
    </ButtonGroup.Root>
  </Wrap>
</VStack>
```

## Props

<PropsTable
  name="button"
  all
  omit={["ButtonGroupRoot", "IconButton", "ButtonGroup.IconItem"]}
/>

## アクセシビリティ

`Button`は、アクセシビリティに関して[WAI-ARIA - Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)に従います。

### キーボード操作

| キー             | 説明                                           | 状態 |
| ---------------- | ---------------------------------------------- | ---- |
| `Space`, `Enter` | フォーカスしているボタンをアクティブにします。 | -    |

### ARIAロールと属性

| コンポーネント | ロールと属性    | 使い方                       |
| -------------- | --------------- | ---------------------------- |
| `Button`       | `role="button"` | ボタンであることを示します。 |
